<template>
  <div>
    <div id="search">
      <nav @click="back"><van-icon name="arrow-left"/><span>返回</span> </nav>
      <van-search
          v-model="value"
          shape="round"
          background="rgb(227,3,3)"
          placeholder="请输入搜索关键词"
      />
    </div>
    <TopSearch @searchTop="searchHotSong"></TopSearch>
    <div style="padding: 0 10px">
      <SearchSongLi v-for="item in searchResultList" :key="item.id" :id="item.id" :picUrl="item.al.picUrl" :name="item.name" :alias="item.alia[0]"  :songerList="item.ar" ></SearchSongLi>
    </div>
  </div>
</template>

<script>

import {searchSong} from "@/http/api";
import TopSearch from "@/components/TopSearch";
import SearchSongLi from "@/components/SearchSongLi";


export default {
  name: "Search",
  data(){
    return {
      value:'',
      searchResultList: [],
    }
  },
  methods:{
    searchHotSong(data){
      // console.log(data)
      this.value = data.keyword
    },
    back(){
      this.$router.back()
    }
  },
  components:{
    TopSearch,
    SearchSongLi,
  },
  watch:{
    value:function(){
      if (this.value != '') {
        searchSong(this.value).then(res=> {
          // console.log(res)
          this.searchResultList = res.data.result.songs
          // console.log(this.searchResultList)
        })
      }
    }
  },
}
</script>

<style scoped lang="less">
#search {
  display: flex;
  align-items: center;
  background-color: rgb(227,3,3);
  >nav {

    color: whitesmoke;
    font-size: 20px;
    >span {
      font-size: 18px;
    }
  }
  >div {
    flex-grow: 1;
  }
  //width: 80%;

}
</style>